
<template>
  <div>
    <el-card class="echart-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px;font-weight: bold;">{{ name }}</span>
        <el-dropdown style="float: right; padding: 3px 0" type="text" @command="handleCommand">
          <el-button type="primary">
            {{ typeText }}<i class="el-icon-arrow-down el-icon--right"/>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="table">表格</el-dropdown-item>
            <el-dropdown-item command="line">折线图</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <table v-show="type=='table'" class="table sparkle-table" >
        <thead>
          <tr>
            <th class="header-empty">区间</th>
            <th v-for=" (o,index) in echartField" :key="index" class="text item">
              {{ o }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>成功率</td>
            <td v-for=" (o,index) in echartData" :key="index" class="text item">
              {{ o + '%' }}
            </td>
          </tr>
        </tbody>
      </table>
      <div v-show="type!='table'" class="echarts-container">
        <div :id="idstr" style="width:100%;height:300px;"/>
      </div>
    </el-card>

  </div>
</template>
<script >

export default{
  props: {
    // 名称
    'name': {
      type: String,
      default: null
    },
    // 数据列表
    'list': {
      type: Array,
      default: null
    },
    // 实际数据对应的列
    'field': {
      type: Array,
      default: null
    },
    // echart对应的id
    'idstr': {
      type: String,
      default: null
    }
  },
  data() {
    return {
      drawer: '',
      type: 'line',
      typeText: '表格',
      echartField: [],
      echartData: []
    }
  },
  watch: {
    list: {
      immediate: true,
      handler(val, oldVal) {
        this.dataRefresh()
      }
    }
  },
  mounted() {
    this.dataRefresh()
  },
  methods: {
    handleCommand(command) {
      this.type = command
      this.typeText = command === 'table' ? '表格' : '折线图'
      this.dataRefresh()
    },
    drawLine() {
      const dom = document.getElementById(this.idstr)
      if (dom) {
        // 基于准备好的dom，初始化echarts实例
        this.drawer = this.$echarts.init(dom)
        // 绘制图表
        this.drawer.setOption({
          tooltip: {
            trigger: 'axis' // axis   item   none三个值
          },
          xAxis: {
            type: 'category', // 还有其他的type，可以去官网喵两眼哦
            data: this.echartField, // x轴数据
            name: '' // x轴名称
          // x轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
          },
          yAxis: {
            type: 'value',
            scale: true,
            name: '成功率'
          },
          legend: {
            orient: 'vertical',
            x: 'center',
            y: 'top',
            data: ['成功率']
          },
          series: [
            {
              name: this.name,
              data: this.echartData,
              type: 'line'
            }
          ]
        })
      }
    },
    dataRefresh() {
      if (this.list && this.list.length > 0) {
        this.dataFormat()
        if (this.type === 'line') {
          this.$nextTick(function() {
            this.drawLine()
          })
        }
      }
    },
    dataFormat() {
      this.echartData = []
      this.echartField = []
      for (let i = 0; i < this.list.length; i++) {
        if (!isNaN(this.list[i]) && this.list[i] != null) {
          this.echartField.push(this.field[i])
          this.echartData.push(this.list[i])
        }
      }
    }
  }
}
</script>

<style lang="scss">
.echart-card{
  table{
    font-size: 14px;
    .header-empty{
        width:150px;
    }
    th.text.item{
      padding: 0 10px;
      border-width:0 2px;
    }
    td.text.item{
      padding: 0 10px;
      border-width:0 1px 0 0;
      border-color: black;
      border-style: solid;
    }
    td.text.item:last-child{
      border-width:0;
    }
    text-align: center;
  }
}
</style>
